import { PureComponent } from "react";
import { Button, Modal,ActivityIndicator,InputItem,NavBar,Icon,PullToRefresh,ListView } from "antd-mobile"
import { connect } from 'dva';
import { handleImg, goToPage,isNull } from "../../utils/helper";
import {IntlProvider, addLocaleData,FormattedMessage} from 'react-intl';
import localeData from '../../../public/lang/data.json';
import ReactDOM from 'react-dom';
import MToast from '../../components/Util/MToast';
@connect(() => {
  return ({

  })
})
export default class MyOrder extends PureComponent{
  constructor(props){
    super(props);
    const dataSource = new ListView.DataSource({
      rowHasChanged: (row1, row2) => row1 !== row2 // rowHasChanged(prevRowData, nextRowData); 用其进行数据变更的比较
    })
    this.state = {
      orderItem:[],
      loading: true,
      dataSource,
      newsList:[],
      pages:{
        pageNum:1,
        pageSize:20
      },
      hasMore: true,
      refreshing: true,
      isLoading: true,
      height: document.documentElement.clientHeight,
      useBodyScroll: true,
    }
  }
  componentDidUpdate() {
    if (this.state.useBodyScroll) {
      document.body.style.overflow = 'auto';
    } else {
      document.body.style.overflow = 'hidden';
    }
  }
  componentWillMount(){
    let {dispatch,location} = this.props;
    dispatch({
      type: "global/setHeaderTitle",
      payload: {
        title: localeData[localStorage.locale].myTitle,
        path: location.pathname + location.search
      }
    });
    this.orderList(this.state.pages)

  }
  orderList=(pages)=>{
    let {dispatch,location} = this.props;
    dispatch({
      type: "form/query",
      payload: {
        apiInfo: {
          "url": "qry/all?_c=app_user_order_list",
          "params": [
          ]
        },
        callback: (result) => {
          let { data } = result;
          console.log(data)
          const len = data.length
          if(len/20>=this.state.pages.pageNum){
            this.state.pages.pageNum++;
            this.state.newsList=[...this.state.newsList,...data]
            this.setState({
              newsList:this.state.newsList,
              dataSource: this.state.dataSource.cloneWithRows(this.state.newsList),
              isLoading: false,
              pages:this.state.pages,
            })
          }else{
            this.setState({
              newsList:this.state.newsList,
              dataSource: this.state.dataSource.cloneWithRows(data),
              isLoading: false,
              pages:this.state.pages,
            })
          }
          this.setState({
            refreshing:false,
            loading:false
          })
          // this.setState({
          //   orderItem:data,
          //   loading:false
          // })
        }
      }
    })
  }
  onRefresh=()=>{
    this.state.pages.pageNum = 1;
    this.setState({ refreshing: true, isLoading: true ,pages:this.state.pages,newsList:[]});
    setTimeout(() => {
      this.orderList(this.state.pages);
    }, 600);
    // this.bannerList();

  }
  // 滑动到底部时加载更多
  onEndReached = (event) => {//触底加载
    if (this.state.isLoading) {
      return;
    }
    this.setState({ isLoading: true });
    setTimeout(() => {
      this.orderList(this.state.pages)
    }, 600);
  }
  handleOrder=(e,i)=>{
    let {dispatch} = this.props;
    console.log(i);
    // localStorage.setItem("list_id",item.id);
    goToPage({ dispatch, config: { url: "/orderDetail?id="+i.id }, isReplace: false })
  }
  renderList() {
    let { orderItem} = this.state;
    if (!orderItem || orderItem.length == 0) {
      return (
        <div style={{ padding: "40px 0", textAlign: "center", fontSize: "20px", color: "#555" }}>
          {T(localeData[localStorage.locale].goodsDetailCartNoGood)}
        </div>
      )
    }
    else {
      let contents = [];
      return (
          <div>
            {
              orderItem.map((item, k) => {
                let { order_type, created_time, order_code, quantity, total_amount,} = item;
                return(
                  <div style={{padding:'5% 3% 4% 5%',borderBottom:'10px solid #F3F3F5'}} onClick={this.handleOrder.bind(this.item,item)} key={k}>
                    <div style={{overflow:'hidden',color:'#2E2D35'}}>
                      <div style={{float:'left',width:'78%'}}>{order_type}</div>
                      <div style={{float:'left',color:'#FF9F00',fontSize:'20px'}}>€{total_amount}</div>
                    </div>
                    <div style={{color:'#9C9BAB',fontSize:'11px',margin:'4% 0 2% 0'}}>{localeData[localStorage.locale].myOrderNum}</div>
                    <div style={{color:'#595867',fontSize:'15px'}}>{quantity}</div>
                    <div style={{color:'#9C9BAB',fontSize:'11px',margin:'4% 0 2%'}}>{localeData[localStorage.locale].myOrderTime}</div>
                    <div style={{color:'#595867',fontSize:'12px'}}>{created_time}</div>
                    <div style={{color:'#9C9BAB',fontSize:'11px',margin:'4% 0 2%'}}>{localeData[localStorage.locale].myOrderCode}</div>
                    <div style={{color:'#595867',fontSize:'12px'}}>{order_code}</div>
                  </div>
                )



              })
            }
          </div>
      )
    }
  }
  render(){
    let {dispatch} = this.props;
    let {orderItem} = this.state;
    let {loading} = this.state;
    const messages = localeData[localStorage.locale];
    const row =(rowData, sectionID, rowID)=>{
      console.log(rowData)
      return (
        <div style={{marginRight:'3%'}}>
          <div style={{padding:'5% 3% 4% 5%',borderBottom:'10px solid #F3F3F5'}}  key={rowID} onClick={(e) => {this.handleOrder(e,rowData) }}>
            <div style={{overflow:'hidden',color:'#2E2D35'}}>
              <div style={{float:'left',width:'78%'}}>{rowData.order_type}</div>
              <div style={{float:'left',color:'#FF9F00',fontSize:'20px'}}>€{rowData.total_amount}</div>
            </div>
            <div style={{color:'#9C9BAB',fontSize:'11px',margin:'4% 0 2% 0'}}>{localeData[localStorage.locale].myOrderNum}</div>
            <div style={{color:'#595867',fontSize:'15px'}}>{rowData.quantity}</div>
            <div style={{color:'#9C9BAB',fontSize:'11px',margin:'4% 0 2%'}}>{localeData[localStorage.locale].myOrderTime}</div>
            <div style={{color:'#595867',fontSize:'12px'}}>{rowData.created_time}</div>
            <div style={{color:'#9C9BAB',fontSize:'11px',margin:'4% 0 2%'}}>{localeData[localStorage.locale].myOrderCode}</div>
            <div style={{color:'#595867',fontSize:'12px'}}>{rowData.order_code}</div>
          </div>


        </div>

      )
    }
    if (loading) {
      return (
        <div className="normal">
          <ActivityIndicator toast text={messages.loading} animating={true} />
        </div>
      )
    }
    return(
      <IntlProvider
        locale={ localStorage.locale } messages={messages}
      >
      <div style={{height:"100%",background:'#fff'}}>
        <div style={{fontWeight:'bold',paddingTop:'40px'}}>
          <ListView
            ref={el => this.lv = el}
            dataSource={this.state.dataSource}
            renderRow={row}
            useBodyScroll
            onEndReachedThreshold={10}
            onEndReached={this.onEndReached}
            pageSize={5}
            scrollEventThrottle={1}
            renderFooter={() => (<div style={{ padding:'0px 0px 40px' , textAlign: 'center' }}>
              {this.state.isLoading ? 'Loading...' : 'Loaded'}
            </div>)}
            className="myOrder"
            pullToRefresh={<PullToRefresh
              refreshing={this.state.refreshing}
              onRefresh={this.onRefresh}
            />}
          >

          </ListView>
        </div>
      </div>
      </IntlProvider>
    )
  }
}
